<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>CSS 第 08 天 —— HTML5+CSS3 提高 | 前端基础班学习笔记</title>
    <meta name="generator" content="VuePress 1.7.1">
    
    <meta name="description" content="前端基础班笔记">
    <meta name="theme-color" content="#3eaf7c">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    
    <link rel="preload" href="/basenode/assets/css/0.styles.2182318c.css" as="style"><link rel="preload" href="/basenode/assets/js/app.52c57e5d.js" as="script"><link rel="preload" href="/basenode/assets/js/2.fd1002bd.js" as="script"><link rel="preload" href="/basenode/assets/js/6.ae7868e8.js" as="script"><link rel="prefetch" href="/basenode/assets/js/10.0fd16134.js"><link rel="prefetch" href="/basenode/assets/js/11.69b32ff0.js"><link rel="prefetch" href="/basenode/assets/js/12.8306a2fe.js"><link rel="prefetch" href="/basenode/assets/js/13.bd409108.js"><link rel="prefetch" href="/basenode/assets/js/14.397fbca0.js"><link rel="prefetch" href="/basenode/assets/js/15.3ebf464d.js"><link rel="prefetch" href="/basenode/assets/js/16.18b0f270.js"><link rel="prefetch" href="/basenode/assets/js/17.aca32580.js"><link rel="prefetch" href="/basenode/assets/js/18.b36abbab.js"><link rel="prefetch" href="/basenode/assets/js/19.40fd0225.js"><link rel="prefetch" href="/basenode/assets/js/20.9c6d2a17.js"><link rel="prefetch" href="/basenode/assets/js/21.6d37b375.js"><link rel="prefetch" href="/basenode/assets/js/22.c01d802c.js"><link rel="prefetch" href="/basenode/assets/js/23.d7de44fa.js"><link rel="prefetch" href="/basenode/assets/js/24.3470c223.js"><link rel="prefetch" href="/basenode/assets/js/3.924754cc.js"><link rel="prefetch" href="/basenode/assets/js/4.4eeb3907.js"><link rel="prefetch" href="/basenode/assets/js/5.88e4a4fd.js"><link rel="prefetch" href="/basenode/assets/js/7.6ab91996.js"><link rel="prefetch" href="/basenode/assets/js/8.750a9450.js"><link rel="prefetch" href="/basenode/assets/js/9.26864b79.js">
    <link rel="stylesheet" href="/basenode/assets/css/0.styles.2182318c.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/basenode/" class="home-link router-link-active"><!----> <span class="site-name">前端基础班学习笔记</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/basenode/html/" class="nav-link">
  HTML
</a></div><div class="nav-item"><a href="/basenode/css/" class="nav-link router-link-active">
  CSS
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/basenode/html/" class="nav-link">
  HTML
</a></div><div class="nav-item"><a href="/basenode/css/" class="nav-link router-link-active">
  CSS
</a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>CSS</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/basenode/css/" aria-current="page" class="sidebar-link">CSS 学习</a></li><li><a href="/basenode/css/day01.html" class="sidebar-link">CSS 第 01 天 —— 基础选择器</a></li><li><a href="/basenode/css/day02.html" class="sidebar-link">CSS 第 02 天 —— 复合选择器</a></li><li><a href="/basenode/css/day03.html" class="sidebar-link">CSS 第 03 天 —— 盒子模型</a></li><li><a href="/basenode/css/day04.html" class="sidebar-link">CSS 第 04 天 —— 浮动</a></li><li><a href="/basenode/css/day05.html" class="sidebar-link">CSS 第 05 天 —— 学成在线</a></li><li><a href="/basenode/css/day06.html" class="sidebar-link">CSS 第 06 天 —— 定位</a></li><li><a href="/basenode/css/day07.html" class="sidebar-link">CSS 第 07 天 —— 高级技巧</a></li><li><a href="/basenode/css/day08.html" aria-current="page" class="active sidebar-link">CSS 第 08 天 —— HTML5+CSS3 提高</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day08.html#能力目标" class="sidebar-link">能力目标</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day08.html#html5css3-提高导读" class="sidebar-link">HTML5CSS3 提高导读</a></li></ul></li><li class="sidebar-sub-header"><a href="/basenode/css/day08.html#_1-html5" class="sidebar-link">1. HTML5</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day08.html#_1-1-html5-提高-新增语义化标签" class="sidebar-link">1.1 HTML5 提高-新增语义化标签</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day08.html#☆1-2-html5-新增视频标签" class="sidebar-link">☆1.2 HTML5 新增视频标签</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day08.html#_1-3-html5-新增音频标签" class="sidebar-link">1.3 HTML5 新增音频标签</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day08.html#☆1-4-html5-新增-input-表单" class="sidebar-link">☆1.4 HTML5 新增 input 表单</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day08.html#☆1-5-html5-新增表单属性" class="sidebar-link">☆1.5 HTML5 新增表单属性</a></li></ul></li><li class="sidebar-sub-header"><a href="/basenode/css/day08.html#☆2-css3-选择器" class="sidebar-link">☆2. CSS3 选择器</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day08.html#☆2-1-css3-新增属性选择器-上" class="sidebar-link">☆2.1 CSS3 新增属性选择器（上）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day08.html#_2-2-css3-新增属性选择器-下" class="sidebar-link">2.2 CSS3 新增属性选择器（下）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day08.html#☆c2-3-css3-新增结构伪类选择器-选择第-n-个元素" class="sidebar-link">☆c2.3 CSS3 新增结构伪类选择器-选择第 n 个元素</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day08.html#☆2-4-css3-新增-nth-child-选择器-上" class="sidebar-link">☆2.4 CSS3 新增 nth-child 选择器(上）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day08.html#☆2-5-css3-新增-nth-child-选择器-下" class="sidebar-link">☆2.5 CSS3 新增 nth-child 选择器(下）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day08.html#_2-6-nth-child-和-nth-of-type-的区别" class="sidebar-link">2.6 nth-child 和 nth-of-type 的区别</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day08.html#☆2-7-css3-新增伪元素选择器使用场景和由来" class="sidebar-link">☆2.7 CSS3 新增伪元素选择器使用场景和由来</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day08.html#_2-8-css3-新增伪元素选择器基本使用" class="sidebar-link">2.8 CSS3 新增伪元素选择器基本使用</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day08.html#_2-9-伪元素选择器使用场景-1-配合字体图标" class="sidebar-link">2.9 伪元素选择器使用场景 1-配合字体图标</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day08.html#_2-10-伪元素选择器使用场景-2-仿土豆效果" class="sidebar-link">2.10 伪元素选择器使用场景 2-仿土豆效果</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day08.html#_2-11-伪元素选择器使用场景-3-伪元素清除浮动本质" class="sidebar-link">2.11 伪元素选择器使用场景 3-伪元素清除浮动本质</a></li></ul></li><li class="sidebar-sub-header"><a href="/basenode/css/day08.html#☆3-css3-盒子模型" class="sidebar-link">☆3. CSS3 盒子模型</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day08.html#_3-1-css3-盒子模型-border-box" class="sidebar-link">3.1 CSS3 盒子模型 border-box</a></li></ul></li><li class="sidebar-sub-header"><a href="/basenode/css/day08.html#☆4-css3-其他特性" class="sidebar-link">☆4. CSS3 其他特性</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day08.html#☆4-1-css3-图片模糊处理" class="sidebar-link">☆4.1 CSS3 图片模糊处理</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day08.html#_4-2-计算盒子宽度-calc-函数" class="sidebar-link">4.2 计算盒子宽度 calc 函数</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day08.html#☆4-3-css3-新增属性过渡-上-下" class="sidebar-link">☆4.3 CSS3 新增属性过渡（上 / 下）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day08.html#_4-4-css3-过渡练习" class="sidebar-link">4.4 CSS3 过渡练习</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day08.html#_4-5-css3-课堂作业-小米-logo" class="sidebar-link">4.5 CSS3 课堂作业 —— 小米 Logo</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day08.html#_4-6-广义的-h5-了解" class="sidebar-link">4.6 广义的 H5(了解）</a></li></ul></li></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="css-第-08-天-html5-css3-提高"><a href="#css-第-08-天-html5-css3-提高" class="header-anchor">#</a> CSS 第 08 天 —— HTML5+CSS3 提高</h1> <h2 id="能力目标"><a href="#能力目标" class="header-anchor">#</a> 能力目标</h2> <ol><li>能够说出 3~5 个 HTML5 新增布局和表单标签；</li> <li>能够说出 C3 的新增特性。</li></ol> <h3 id="html5css3-提高导读"><a href="#html5css3-提高导读" class="header-anchor">#</a> HTML5CSS3 提高导读</h3> <blockquote><p>第 1 节课 / 1'25''</p></blockquote> <p>过渡视频，介绍 CSS 第 8 天的学习路径：</p> <ol><li>HTML5 的新特性</li> <li>CSS3 的新特性</li></ol> <h2 id="_1-html5"><a href="#_1-html5" class="header-anchor">#</a> 1. HTML5</h2> <h3 id="_1-1-html5-提高-新增语义化标签"><a href="#_1-1-html5-提高-新增语义化标签" class="header-anchor">#</a> 1.1 HTML5 提高-新增语义化标签</h3> <blockquote><p>第 1 节课 / 9'10''</p></blockquote> <h4 id="_1-1-1-「html5-提高-新增语义化标签」问题"><a href="#_1-1-1-「html5-提高-新增语义化标签」问题" class="header-anchor">#</a> 1.1.1 「HTML5 提高-新增语义化标签」问题</h4> <ul><li>问题 1：HTML5 新特性有兼容性问题吗？IE 多少版本以上的浏览器才能支持？</li> <li>问题 2：HTML5 新增的语义化标签有什么好处？</li> <li>问题 3：视频中介绍了哪些 HTML5 的语义化标签？分别可以用在布局的什么位置？</li></ul> <h4 id="_1-1-2-「html5-提高-新增语义化标签」答案"><a href="#_1-1-2-「html5-提高-新增语义化标签」答案" class="header-anchor">#</a> 1.1.2 「HTML5 提高-新增语义化标签」答案</h4> <ul><li><p>问题 1：HTML 5 新特性有兼容性问题吗？IE 多少版本以上的浏览器才能支持？</p> <ul><li>HTML5 的新特性都有兼容性问题，基本是 <strong>IE9+ 以上版本的浏览器</strong>才支持；</li> <li>如果不考虑兼容性问题，可以大量使用这些新特性。</li></ul></li> <li><p>问题 2：HTML5 新增的语义化标签有什么好处？</p> <ul><li>有利于<strong>搜索引擎搜索</strong>和网站的 <code>SEO</code>（Search Engine Optimization，搜索引擎优化）。</li></ul></li> <li><p>问题 3：视频中介绍了哪些 HTML 5 的语义标签？分别可以用在布局的什么位置？</p> <table><thead><tr><th style="text-align:center;">序号</th> <th>标签</th> <th>描述</th></tr></thead> <tbody><tr><td style="text-align:center;">1</td> <td>header</td> <td>头部标签，通常包含一组介绍性的或是辅助导航的实用元素</td></tr> <tr><td style="text-align:center;">2</td> <td>nav</td> <td>导航标签，在当前文档或其他文档中提供导航链接</td></tr> <tr><td style="text-align:center;">3</td> <td>article</td> <td>内容标签，表示文档、页面、应用或网站中的独立结构</td></tr> <tr><td style="text-align:center;">4</td> <td>section</td> <td>定义文档的某个区域，没有更具体的语义</td></tr> <tr><td style="text-align:center;">5</td> <td>aside</td> <td>侧边栏标签，表示一个和其余页面内容几乎无关的部分</td></tr> <tr><td style="text-align:center;">6</td> <td>footer</td> <td>尾部标签，表示页脚</td></tr></tbody></table> <p><img src="/basenode/assets/img/semantic-tags.d91a0e3f.png" alt="semantic-tags"></p></li></ul> <h3 id="☆1-2-html5-新增视频标签"><a href="#☆1-2-html5-新增视频标签" class="header-anchor">#</a> ☆1.2 HTML5 新增视频标签</h3> <blockquote><p>第 1 节课 / 12'47''</p></blockquote> <h4 id="_1-2-1-「html5-新增视频标签」问题"><a href="#_1-2-1-「html5-新增视频标签」问题" class="header-anchor">#</a> 1.2.1 「HTML5 新增视频标签」问题</h4> <ul><li>问题 1：HTML5 主要新增了哪两个多媒体标签？</li> <li>问题 2：<code>video</code> 标签支持几种视频格式？推荐使用哪一种格式？</li> <li>问题 3：<code>video</code> 标签是单标签还是双标签？<code>img</code> 标签呢？</li> <li>问题 4：<code>video</code> 标签提供了哪些控制播放的属性？</li> <li>问题 5：<code>video</code> 标签的宽高属性可以通过 CSS 控制吗？</li></ul> <h4 id="_1-2-2-「html5-新增视频标签」答案"><a href="#_1-2-2-「html5-新增视频标签」答案" class="header-anchor">#</a> 1.2.2 「HTML5 新增视频标签」答案</h4> <ul><li><p>问题 1：HTML5 主要新增了哪两个多媒体标签？</p> <ul><li><code>video</code> 视频标签</li> <li><code>audio</code> 音频标签</li></ul></li> <li><p>问题 2：<code>video</code> 标签支持几种视频格式？推荐使用哪一种格式？</p> <p><img src="/basenode/assets/img/explorer-support-video-format.bc2b89c7.png" alt="explorer-support-video-format"></p> <ul><li>推荐使用 <code>mp4</code> 格式的视频</li></ul></li> <li><p>问题 3：<code>video</code> 标签是单标签还是双标签？<code>img</code> 标签呢？</p> <ul><li><p><code>video</code> 是双标签，可以针对不同浏览器提供不同格式的视频；</p></li> <li><p><code>img</code> 是单标签，指定 <code>src</code> 既可以显示图像，不存在浏览器兼容问题。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>video</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>320<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>240<span class="token punctuation">&quot;</span></span> <span class="token attr-name">controls</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>movie.mp4<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>video/mp4<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>movie.ogg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>video/ogg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  您的浏览器不支持 video 标签。
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>video</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li></ul></li> <li><p>问题 4：<code>video</code> 标签提供了哪些控制播放的属性？</p> <table><thead><tr><th>属性</th> <th>值</th> <th>描述</th></tr></thead> <tbody><tr><td>src</td> <td>url</td> <td>要播放的视频的 URL。</td></tr> <tr><td>autoplay</td> <td>autoplay</td> <td>如果出现该属性，则视频在就绪后马上播放。（<strong>谷歌浏览器</strong>需要添加 <code>muted</code> 属性来解决自动播放问题）</td></tr> <tr><td>controls</td> <td>controls</td> <td>如果出现该属性，则向用户显示控件，比如播放按钮。</td></tr> <tr><td>loop</td> <td>loop</td> <td>如果出现该属性，则当媒介文件完成播放后再次开始播放。</td></tr> <tr><td>muted</td> <td>muted</td> <td>如果出现该属性，视频的音频输出为静音。</td></tr> <tr><td>poster</td> <td>URL</td> <td>规定视频正在下载时显示的图像，直到用户点击播放按钮。</td></tr> <tr><td>preload</td> <td>auto <br> none</td> <td>如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用，&quot;autoplay&quot;，则忽略该属性。</td></tr> <tr><td>width</td> <td>pixels</td> <td>设置视频播放器的宽度。</td></tr> <tr><td>height</td> <td>pixels</td> <td>设置视频播放器的高度。</td></tr></tbody></table></li> <li><p>问题 5：<code>video</code> 标签的宽高属性可以通过 CSS 控制吗？</p> <ul><li>可以</li></ul></li></ul> <h4 id="_1-2-3-「html5-新增视频标签」课堂练习"><a href="#_1-2-3-「html5-新增视频标签」课堂练习" class="header-anchor">#</a> 1.2.3 「HTML5 新增视频标签」课堂练习</h4> <ol><li><p>练习时长：5 分钟</p></li> <li><p>练习目的：体会 HTML5 视频标签及相关属性的使用</p></li> <li><p>练习素材：</p> <p>猛击下载 <a href="/downloads/medias.zip">课堂练习素材</a>。</p></li> <li><p>参考代码：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>video</span>
  <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>./media/mi.mp4<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">controls</span>
  <span class="token attr-name">muted</span>
  <span class="token attr-name">loop</span>
  <span class="token attr-name">poster</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>./media/mi9.jpg<span class="token punctuation">&quot;</span></span>
<span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>video</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li></ol> <h3 id="_1-3-html5-新增音频标签"><a href="#_1-3-html5-新增音频标签" class="header-anchor">#</a> 1.3 HTML5 新增音频标签</h3> <blockquote><p>第 1 节课 / 5'15''</p></blockquote> <h4 id="_1-3-1-「html5-新增音频标签」问题"><a href="#_1-3-1-「html5-新增音频标签」问题" class="header-anchor">#</a> 1.3.1 「HTML5 新增音频标签」问题</h4> <ul><li>问题 1：<code>audio</code> 标签支持几种音频格式？推荐使用哪一种格式？</li> <li>问题 2：<code>audio</code> 标签是单标签还是双标签？<code>img</code> 标签呢？</li> <li>问题 3：<code>audio</code> 标签提供了哪些控制播放的属性？</li> <li>问题 4：<code>audio</code> 标签的使用和 <code>video</code> 标签的使用有什么共同点？应该如何记忆和使用？</li></ul> <h4 id="_1-3-2-「html5-新增音频标签」答案"><a href="#_1-3-2-「html5-新增音频标签」答案" class="header-anchor">#</a> 1.3.2 「HTML5 新增音频标签」答案</h4> <ul><li><p>问题 1：<code>audio</code> 标签支持几种音频格式？推荐使用哪一种格式？</p> <p><img src="/basenode/assets/img/explorer-support-audio-format.16a80dbd.png" alt="explorer-support-audio-format"></p> <ul><li>推荐使用 <code>mp3</code> 格式的音频</li></ul></li> <li><p>问题 2：<code>audio</code> 标签是单标签还是双标签？<code>img</code> 标签呢？</p> <ul><li><p><code>audio</code> 是双标签，可以针对不同浏览器提供不同格式的音频；</p></li> <li><p><code>img</code> 是单标签，指定 <code>src</code> 既可以显示图像，不存在浏览器兼容问题。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>audio</span> <span class="token attr-name">controls</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>horse.ogg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>audio/ogg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>horse.mp3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>audio/mpeg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  您的浏览器不支持 audio 元素。
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>audio</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li></ul></li> <li><p>问题 3：<code>audio</code> 标签提供了哪些控制播放的属性？</p> <table><thead><tr><th>属性</th> <th>值</th> <th>描述</th></tr></thead> <tbody><tr><td>src</td> <td>url</td> <td>规定音频文件的 URL。</td></tr> <tr><td>autoplay</td> <td>autoplay</td> <td>如果出现该属性，则音频在就绪后马上播放（<strong>谷歌浏览器</strong>禁止自动播放）。</td></tr> <tr><td>controls</td> <td>controls</td> <td>如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）。</td></tr> <tr><td>loop</td> <td>loop</td> <td>如果出现该属性，则每当音频结束时重新开始播放。</td></tr> <tr><td>muted</td> <td>muted</td> <td>如果出现该属性，则音频输出为静音。</td></tr> <tr><td>preload</td> <td>auto / none</td> <td>规定当网页加载时，音频是否默认被加载以及如何被加载。</td></tr></tbody></table></li> <li><p>问题 4：<code>audio</code> 标签的使用和 <code>video</code> 标签的使用有什么共同点？应该如何记忆和使用？</p> <ol><li>音频标签和视频标签使用方式基本一致</li> <li>浏览器支持情况不同
<ol><li>视频使用 <code>mp4</code> 格式</li> <li>音频使用 <code>mp3</code> 格式</li></ol></li> <li>谷歌浏览器禁用了音频和视频的自动播放
<ol><li>视频标签添加 muted 属性来静音播放视频</li> <li>音频不可以（可以通过 JavaScript 解决）</li></ol></li> <li>视频标签是重点，我们经常设置自动播放，不使用 <code>controls</code> 控件，循环和设置大小属性。</li></ol></li></ul> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>多媒体标签的<strong>属性</strong>、<strong>方法</strong>、<strong>事件</strong>比较多，需要什么功能的时候，就去查找相关的文档学习使用即可，不用死记硬背。</p></div> <h3 id="☆1-4-html5-新增-input-表单"><a href="#☆1-4-html5-新增-input-表单" class="header-anchor">#</a> ☆1.4 HTML5 新增 input 表单</h3> <blockquote><p>第 2 节课 / 8'53''</p></blockquote> <h4 id="_1-4-1-「html5-新增-input-表单」问题"><a href="#_1-4-1-「html5-新增-input-表单」问题" class="header-anchor">#</a> 1.4.1 「HTML5 新增 input 表单」问题</h4> <ul><li>问题 1：HTML5 为什么新增很多的表单 <code>input</code> 类型？</li> <li>问题 2：需要重点记忆那三个 <code>input</code> 类型？</li></ul> <h4 id="_1-4-2-「html5-新增-input-表单」答案"><a href="#_1-4-2-「html5-新增-input-表单」答案" class="header-anchor">#</a> 1.4.2 「HTML5 新增 input 表单」答案</h4> <ul><li><p>问题 1：HTML5 为什么新增很多的表单 <code>input</code> 类型？</p> <ul><li>方便程序员的开发，与表单域联用，不同的 <code>input</code> 类型能够自动添加校验功能；</li> <li>方便移动端的开发，不同的 <code>input</code> 类型，键盘的弹出方式不同。</li></ul> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>在做 iOS 开发时，如果不同的 <code>input</code> 类型<strong>键盘的弹出方式不正确</strong>，App 的审核通常会不通过。</p></div></li> <li><p>问题 2：需要重点记忆那三个 <code>input</code> 类型？</p> <ul><li><p>需要重点记忆：<code>number</code>、<code>tel</code>、<code>search</code> 三个 <code>input</code> 类型；</p></li> <li><p>常用输入类型：<code>text</code>、<code>password</code>、<code>radio</code>、<code>checkbox</code>、<code>button</code>、<code>file</code>、<code>hidden</code>、<code>submit</code>、<code>reset</code>。</p> <table><thead><tr><th>类型</th> <th>属性值</th> <th>描述</th></tr></thead> <tbody><tr><td>输入</td> <td>number</td> <td>限制用户必须输入<strong>数字</strong>类型</td></tr> <tr><td>输入</td> <td>tel</td> <td>手机号码</td></tr> <tr><td>输入</td> <td>search</td> <td>搜索框</td></tr> <tr><td>输入</td> <td>email</td> <td>限制用户必须输入<strong>电子邮件</strong>类型</td></tr> <tr><td>输入</td> <td>url</td> <td>限制用户必须输入<strong>网址</strong>类型</td></tr> <tr><td>选择</td> <td>date</td> <td>限制用户必须输入<strong>日期</strong>类型</td></tr> <tr><td>选择</td> <td>time</td> <td>限制用户必须输入<strong>时间</strong>类型</td></tr> <tr><td>选择</td> <td>month</td> <td>限制用户必须输入<strong>月</strong>类型</td></tr> <tr><td>选择</td> <td>week</td> <td>限制用户必须输入<strong>星期</strong>类型</td></tr> <tr><td>选择</td> <td>color</td> <td>弹出窗口选择颜色</td></tr></tbody></table></li></ul></li></ul> <h4 id="_1-4-3-「html5-新增-input-表单」课堂练习"><a href="#_1-4-3-「html5-新增-input-表单」课堂练习" class="header-anchor">#</a> 1.4.3 「HTML5 新增 input 表单」课堂练习</h4> <ol><li><p>练习时长：5 分钟</p></li> <li><p>练习目的：体会 HTML5 新增 input 表单类型</p></li> <li><p>代码素材：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>数量: <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>number<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>手机号码: <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tel<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>搜索: <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>search<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>邮箱: <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>email<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>网址: <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>url<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>日期: <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>date<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>时间: <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>time<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>月份: <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>month<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>星期: <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>week<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>颜色: <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>color<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>div<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>提交<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li></ol> <h3 id="☆1-5-html5-新增表单属性"><a href="#☆1-5-html5-新增表单属性" class="header-anchor">#</a> ☆1.5 HTML5 新增表单属性</h3> <blockquote><p>第 2 节课 / 7'17''</p></blockquote> <h4 id="_1-5-1-「html5-新增表单属性」问题"><a href="#_1-5-1-「html5-新增表单属性」问题" class="header-anchor">#</a> 1.5.1 「HTML5 新增表单属性」问题</h4> <ul><li>问题 1：HTML5 新增了哪几个表单属性？分别有什么用处？</li> <li>问题 2：HTML5 新增的表单属性哪些最常用？</li> <li>问题 3：如何修改 <code>palceholder</code> 的样式？</li></ul> <h4 id="_1-5-2-「html5-新增表单属性」答案"><a href="#_1-5-2-「html5-新增表单属性」答案" class="header-anchor">#</a> 1.5.2 「HTML5 新增表单属性」答案</h4> <ul><li><p>问题 1：HTML5 新增了哪几个表单属性？分别有什么用处？</p> <table><thead><tr><th>属性</th> <th>值</th> <th>描述</th></tr></thead> <tbody><tr><td>required</td> <td>required</td> <td>表单拥有该属性表示内容不能为空，必填</td></tr> <tr><td>placeholder</td> <td>提示文本</td> <td>表单的提示信息，存在内容将不显示</td></tr> <tr><td>autofocus</td> <td>autofocus</td> <td>自动聚焦属性</td></tr> <tr><td>autocomplete</td> <td><code>on</code> / <code>off</code></td> <td>是否应该启用自动完成功能。默认已经打开，需要放在表单内，同时加上 <code>name</code> 属性，同时成功提交过</td></tr> <tr><td>multiple</td> <td>multiple</td> <td>可以多选文件提交</td></tr></tbody></table> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>在 HTML5 中，如果<strong>属性</strong>和<strong>属性值</strong>相同，可以<strong>只写属性</strong>。</p></div></li> <li><p>问题 2：HTML5 新增的表单属性哪些最常用？</p> <ul><li><code>placeholder</code>、<code>multiple</code>、<code>required</code></li></ul></li> <li><p>问题 3：如何修改 <code>palceholder</code> 的样式？</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">input::placeholder</span> <span class="token punctuation">{</span>
  <span class="token property">color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li></ul> <h2 id="☆2-css3-选择器"><a href="#☆2-css3-选择器" class="header-anchor">#</a> ☆2. CSS3 选择器</h2> <h3 id="☆2-1-css3-新增属性选择器-上"><a href="#☆2-1-css3-新增属性选择器-上" class="header-anchor">#</a> ☆2.1 CSS3 新增属性选择器（上）</h3> <blockquote><p>第 2 节课 / 8'16''</p></blockquote> <h4 id="_2-1-1-「css3-新增属性选择器-上-」问题"><a href="#_2-1-1-「css3-新增属性选择器-上-」问题" class="header-anchor">#</a> 2.1.1 「CSS3 新增属性选择器（上）」问题</h4> <ul><li><p>问题 1：新增的 CSS3 特性有兼容性问题吗？在开发中要使用吗？</p></li> <li><p>问题 2：我们今天会学习哪 3 类选择器？</p></li> <li><p>问题 3：<strong>属性</strong>选择器的作用是什么？一定要记住的语法是什么？</p> <p><img src="/basenode/assets/img/anatomy-of-an-html-element.9ff2cd77.png" alt="anatomy-of-an-html-element"></p></li></ul> <h4 id="_2-1-2-「css3-新增属性选择器-上-」答案"><a href="#_2-1-2-「css3-新增属性选择器-上-」答案" class="header-anchor">#</a> 2.1.2 「CSS3 新增属性选择器（上）」答案</h4> <ul><li><p>问题 1：新增的 CSS3 特性有兼容性问题吗？在开发中要使用吗？</p> <ul><li>CSS3 的新特性都有兼容性问题，<strong>IE9+ 以上版本的浏览器</strong>才支持；</li> <li>在开发中要使用，这是因为<strong>移动端支持优于 PC 端</strong>。</li></ul></li> <li><p>问题 2：我们今天会学习哪 3 类选择器？</p> <ul><li>属性选择器</li> <li>结构伪类选择器</li> <li>伪元素选择器</li></ul></li> <li><p>问题 3：属性选择器的作用是什么？一定要记住的语法是什么？</p> <ul><li><p>可以根据<strong>元素属性</strong>来选择元素。</p></li> <li><p>属性选择器语法</p> <table><thead><tr><th>选择符</th> <th>描述</th></tr></thead> <tbody><tr><td><code>E[att]</code></td> <td>选择具有 att 属性的 E 元素</td></tr> <tr><td><code>E[att=&quot;val&quot;]</code> ☆</td> <td>选择具有 att 属性且值等于 val 的 E 元素</td></tr> <tr><td><code>E[att^=&quot;val&quot;]</code></td> <td>选择具有 att 属性且值以 val 开头的 E 元素</td></tr> <tr><td><code>E[att$=&quot;val&quot;]</code></td> <td>选择具有 att 属性且值以 val 结尾的 E 元素</td></tr> <tr><td><code>E[att*=&quot;val&quot;]</code></td> <td>选择具有 att 属性且值包含 val 的 E 元素</td></tr></tbody></table> <ul><li><code>^</code> 以 xxx 开头 / <code>$</code> 以 xxx 结束 / <code>*</code> 包含</li></ul></li></ul></li></ul> <h3 id="_2-2-css3-新增属性选择器-下"><a href="#_2-2-css3-新增属性选择器-下" class="header-anchor">#</a> 2.2 CSS3 新增属性选择器（下）</h3> <blockquote><p>第 2 节课 / 7'49''</p></blockquote> <h4 id="_2-2-1-「css3-新增属性选择器-下-」问题"><a href="#_2-2-1-「css3-新增属性选择器-下-」问题" class="header-anchor">#</a> 2.2.1 「CSS3 新增属性选择器（下）」问题</h4> <ul><li>问题 1：属性选择器的权重是多少？</li></ul> <h4 id="_2-2-2-「css3-新增属性选择器-下-」答案"><a href="#_2-2-2-「css3-新增属性选择器-下-」答案" class="header-anchor">#</a> 2.2.2 「CSS3 新增属性选择器（下）」答案</h4> <ul><li><p>问题 1：属性选择器的权重是多少？</p> <table><thead><tr><th>选择器</th> <th>权重</th></tr></thead> <tbody><tr><td>继承或 <code>*</code></td> <td><code>0,0,0,0</code></td></tr> <tr><td>标签选择器</td> <td><code>0,0,0,1</code></td></tr> <tr><td>类选择器 / 属性选择器 / 伪类选择器</td> <td><code>0,0,1,0</code></td></tr> <tr><td>id 选择器</td> <td><code>0,1,0,0</code></td></tr> <tr><td>行内样式</td> <td><code>1,0,0,0</code></td></tr> <tr><td><code>!important</code></td> <td><code>∞</code></td></tr></tbody></table></li></ul> <h4 id="_2-2-3-「css3-新增属性选择器-下-」课堂练习"><a href="#_2-2-3-「css3-新增属性选择器-下-」课堂练习" class="header-anchor">#</a> 2.2.3 「CSS3 新增属性选择器（下）」课堂练习</h4> <ol><li><p>练习时长：5 分钟</p></li> <li><p>练习目的：体会<strong>属性选择器</strong>的基本使用</p></li> <li><p>代码素材：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span><span class="token punctuation">&gt;</span></span>1. 利用属性选择器就可以不用借助于类或者id选择器<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请输入用户名<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span><span class="token punctuation">&gt;</span></span>2. 属性选择器还可以选择属性=值的某些元素 重点务必掌握的<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>password<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span><span class="token punctuation">&gt;</span></span>3. 属性选择器可以选择属性值开头的某些元素<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>icon1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>小图标1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>icon2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>小图标2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>icon3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>小图标3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>icon4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>小图标4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>我是打酱油的<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span><span class="token punctuation">&gt;</span></span>4. 属性选择器可以选择属性值结尾的某些元素<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>icon1-data<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>我是安其拉<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>icon2-data<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>我是哥斯拉<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>icon3-ico<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>哪我是谁<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li></ol> <h3 id="☆c2-3-css3-新增结构伪类选择器-选择第-n-个元素"><a href="#☆c2-3-css3-新增结构伪类选择器-选择第-n-个元素" class="header-anchor">#</a> ☆c2.3 CSS3 新增结构伪类选择器-选择第 n 个元素</h3> <blockquote><p>第 3 节课 / 6'26''</p></blockquote> <h4 id="_2-3-1-「新增结构伪类选择器-选择第-n-个元素」问题"><a href="#_2-3-1-「新增结构伪类选择器-选择第-n-个元素」问题" class="header-anchor">#</a> 2.3.1 「新增结构伪类选择器-选择第 n 个元素」问题</h4> <ul><li>问题 1：<strong>结构伪类</strong>选择器的作用是什么？</li> <li>问题 2：<code>nth-child</code> 的 <code>n</code> 是数字是从 0 开始还是从 1 开始？</li></ul> <h4 id="_2-3-2-「新增结构伪类选择器-选择第-n-个元素」答案"><a href="#_2-3-2-「新增结构伪类选择器-选择第-n-个元素」答案" class="header-anchor">#</a> 2.3.2 「新增结构伪类选择器-选择第 n 个元素」答案</h4> <ul><li><p>问题 1：<strong>结构伪类</strong>选择器的作用是什么？</p> <ul><li><p>根据文档结构来选择器元素，常用于<strong>选择父级选择器里面的子元素</strong>。</p> <table><thead><tr><th>选择符</th> <th>描述</th></tr></thead> <tbody><tr><td><code>E:first-child</code></td> <td>匹配父元素中的第一个子元素 E</td></tr> <tr><td><code>E:last-child</code></td> <td>匹配父元素中的最后一个子元素 E</td></tr> <tr><td><code>E:nth-child(n)</code> ☆</td> <td>匹配父元素中的一个或特定多个子元素 E</td></tr> <tr><td><code>E:first-of-type</code></td> <td>匹配类型 E 的第一个</td></tr> <tr><td><code>E:last-of-type</code></td> <td>匹配类型 E 的最后一个</td></tr> <tr><td><code>E:nth-of-type(n)</code></td> <td>匹配类型 E 的第 n 个</td></tr></tbody></table> <ul><li><code>n</code> 可以是<strong>数字</strong>、<strong>关键字</strong>或<strong>公式</strong></li></ul></li></ul></li> <li><p>问题 2：<code>nth-child</code> 的 <code>n</code> 是数字是从 0 开始还是从 1 开始？</p> <ul><li>从 <code>1</code> 开始，数字是几就选择第几个孩子。</li></ul></li></ul> <h4 id="_2-3-3-「新增结构伪类选择器-选择第-n-个元素」课堂练习"><a href="#_2-3-3-「新增结构伪类选择器-选择第-n-个元素」课堂练习" class="header-anchor">#</a> 2.3.3 「新增结构伪类选择器-选择第 n 个元素」课堂练习</h4> <ol><li>练习时长：5 分钟</li> <li>练习目的：体会<strong>选择第 n 个元素</strong>的基本使用</li></ol> <h3 id="☆2-4-css3-新增-nth-child-选择器-上"><a href="#☆2-4-css3-新增-nth-child-选择器-上" class="header-anchor">#</a> ☆2.4 CSS3 新增 nth-child 选择器(上）</h3> <blockquote><p>第 3 节课 / 6'24''</p></blockquote> <h4 id="_2-4-1-「css3-新增-nth-child-选择器-上-」问题"><a href="#_2-4-1-「css3-新增-nth-child-选择器-上-」问题" class="header-anchor">#</a> 2.4.1 「CSS3 新增 nth-child 选择器(上）」问题</h4> <ul><li>问题 1：<code>nth-child</code> 的 <code>n</code> 的可以使用哪些关键字？分别代表什么含义？</li> <li>问题 2：<code>nth-child</code> 中可以使用 <code>n</code> 吗？表示什么含义？能用其他字母吗？</li></ul> <h4 id="_2-4-2-「css3-新增-nth-child-选择器-上-」答案"><a href="#_2-4-2-「css3-新增-nth-child-选择器-上-」答案" class="header-anchor">#</a> 2.4.2 「CSS3 新增 nth-child 选择器(上）」答案</h4> <ul><li><p>问题 1：<code>nth-child</code> 的 <code>n</code> 的可以使用哪些关键字？分别代表什么含义？</p> <ul><li><code>even</code> 偶数 / <code>odd</code> 奇数</li></ul></li> <li><p>问题 2：<code>nth-child</code> 中可以使用 <code>n</code> 吗？表示什么含义？能用其他字母吗？</p> <ul><li><code>nth-child</code> 可以使用 <code>n</code>，但是不能使用其他字母；</li> <li>直接使用 <code>n</code> 会选择所有孩子
<ul><li><strong><code>n</code> 表示从 0 开始，每次加 1，依次向后面计算，超出范围的元素会被忽略</strong>。</li></ul></li></ul></li></ul> <h4 id="_2-4-3-「css3-新增-nth-child-选择器-上-」课堂练习"><a href="#_2-4-3-「css3-新增-nth-child-选择器-上-」课堂练习" class="header-anchor">#</a> 2.4.3 「CSS3 新增 nth-child 选择器(上）」课堂练习</h4> <ol><li>练习时长：5 分钟</li> <li>练习目的：体会<strong>选择奇数元素和偶数元素</strong>的基本使用</li></ol> <h3 id="☆2-5-css3-新增-nth-child-选择器-下"><a href="#☆2-5-css3-新增-nth-child-选择器-下" class="header-anchor">#</a> ☆2.5 CSS3 新增 nth-child 选择器(下）</h3> <blockquote><p>第 3 节课 / 7'01''</p></blockquote> <h4 id="_2-5-1-「css3-新增-nth-child-选择器-下-」问题"><a href="#_2-5-1-「css3-新增-nth-child-选择器-下-」问题" class="header-anchor">#</a> 2.5.1 「CSS3 新增 nth-child 选择器(下）」问题</h4> <ul><li>问题 1：视频中介绍了几个 <code>n</code> 的常用公式？你能够理解吗？愿不愿意背下来？</li></ul> <h4 id="_2-5-2-「css3-新增-nth-child-选择器-下-」答案"><a href="#_2-5-2-「css3-新增-nth-child-选择器-下-」答案" class="header-anchor">#</a> 2.5.2 「CSS3 新增 nth-child 选择器(下）」答案</h4> <ul><li><p>问题 1：视频中介绍了几个 <code>n</code> 的常用公式？你能够理解吗？愿不愿意背下来？</p> <table><thead><tr><th>公式</th> <th>取值</th></tr></thead> <tbody><tr><td><code>2n</code></td> <td>偶数</td></tr> <tr><td><code>2n + 1</code></td> <td>奇数</td></tr> <tr><td><code>5n</code></td> <td>5、10、15...</td></tr> <tr><td><code>n + 5</code></td> <td>从第 5 个开始（包含第 5 个）一直到最后</td></tr> <tr><td><code>-n + 5</code></td> <td>前 5 个（包含第 5 个）</td></tr></tbody></table></li></ul> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <ul><li><code>n</code> 表示从 0 开始，每次加 1，依次向后面计算，超出范围的元素会被忽略。</li></ul></div> <h4 id="_2-5-3-「css3-新增-nth-child-选择器-下-」课堂练习"><a href="#_2-5-3-「css3-新增-nth-child-选择器-下-」课堂练习" class="header-anchor">#</a> 2.5.3 「CSS3 新增 nth-child 选择器(下）」课堂练习</h4> <ol><li>练习时长：5 分钟</li> <li>练习目的：体会<strong>使用公式选择元素</strong>的基本使用</li></ol> <h3 id="_2-6-nth-child-和-nth-of-type-的区别"><a href="#_2-6-nth-child-和-nth-of-type-的区别" class="header-anchor">#</a> 2.6 nth-child 和 nth-of-type 的区别</h3> <blockquote><p>第 3 节课 / 9'42''</p></blockquote> <h4 id="_2-6-1-「nth-child-和-nth-of-type-的区别」问题"><a href="#_2-6-1-「nth-child-和-nth-of-type-的区别」问题" class="header-anchor">#</a> 2.6.1 「nth-child 和 nth-of-type 的区别」问题</h4> <ul><li>问题 1：<code>nth-child</code> 和 <code>nth-of-type</code> 有什么区别？</li> <li>问题 2：<code>nth-child</code> 和 <code>nth-of-type</code> 哪一个用的多？为什么？</li></ul> <h4 id="_2-6-2-「nth-child-和-nth-of-type-的区别」答案"><a href="#_2-6-2-「nth-child-和-nth-of-type-的区别」答案" class="header-anchor">#</a> 2.6.2 「nth-child 和 nth-of-type 的区别」答案</h4> <ul><li><p>问题 1：<code>nth-child</code> 和 <code>nth-of-type</code> 有什么区别？</p> <ul><li><code>E:nth-child(n)</code> <ul><li>会先把所有的盒子都排列序号</li> <li>首先根据 <code>:nth-child(n)</code> 找到孩子，再去看前面的 <code>E</code> 是否匹配。</li></ul></li> <li><code>E:nth-of-type(n)</code> <ul><li>会把指定元素 <code>E</code> 的盒子排列序号</li> <li>首先看 <code>E</code> 指定的元素，之后再去看 <code>:nth-of-type</code> 的第几个孩子。</li></ul></li></ul></li> <li><p>问题 2：<code>nth-child</code> 和 <code>nth-of-type</code> 哪一个用的多？为什么？</p> <ul><li><code>nth-child</code></li> <li>开发时，<strong>结构伪类选择器</strong>大多用于<strong>无序列表</strong> <code>ul</code> 或<strong>有序列表</strong> <code>ol</code></li></ul></li></ul> <h3 id="☆2-7-css3-新增伪元素选择器使用场景和由来"><a href="#☆2-7-css3-新增伪元素选择器使用场景和由来" class="header-anchor">#</a> ☆2.7 CSS3 新增伪元素选择器使用场景和由来</h3> <blockquote><p>第 4 节课 / 5'09''</p></blockquote> <h4 id="_2-7-1-「css3-新增伪元素选择器使用场景和由来」问题"><a href="#_2-7-1-「css3-新增伪元素选择器使用场景和由来」问题" class="header-anchor">#</a> 2.7.1 「CSS3 新增伪元素选择器使用场景和由来」问题</h4> <ul><li>问题 1：伪元素选择器的作用是什么？</li> <li>问题 2：伪元素是真正意义的元素吗？</li> <li>问题 3：我们重点要学习哪两个伪元素？伪元素和伪类在语法上有什么区别？</li> <li>问题 4：<code>::before</code> 和 <code>::after</code> 属于<strong>行内元素</strong>吗？</li></ul> <h4 id="_2-7-2-「css3-新增伪元素选择器使用场景和由来」答案"><a href="#_2-7-2-「css3-新增伪元素选择器使用场景和由来」答案" class="header-anchor">#</a> 2.7.2 「CSS3 新增伪元素选择器使用场景和由来」答案</h4> <ul><li><p>问题 1：伪元素选择器的作用是什么？</p> <ul><li>伪元素选择器可以利用 CSS 创建新标签元素，而不需要 HTML 标签，从而<strong>简化 HTML 结构</strong>。</li></ul></li> <li><p>问题 2：伪元素是真正意义的元素吗？</p> <ul><li>伪元素不是真正意义的元素，是通过 CSS 创建的。</li></ul></li> <li><p>问题 3：我们重点要学习哪两个伪元素？伪元素和伪类在语法上有什么区别？</p> <ul><li><code>::before</code> 和 <code>::after</code></li> <li>从语法结构上看
<ul><li>伪元素使用 <code>::</code> 开头，关键字<strong>内容</strong>；</li> <li>伪类使用 <code>:</code> 开头，关键字<strong>状态</strong>。</li></ul></li></ul></li> <li><p>问题 4：<code>::before</code> 和 <code>::after</code> 属于<strong>行内元素</strong>吗？</p> <ul><li>属于</li></ul></li></ul> <h3 id="_2-8-css3-新增伪元素选择器基本使用"><a href="#_2-8-css3-新增伪元素选择器基本使用" class="header-anchor">#</a> 2.8 CSS3 新增伪元素选择器基本使用</h3> <blockquote><p>第 4 节课 / 7'23''</p></blockquote> <h4 id="_2-8-1-「css3-新增伪元素选择器基本使用」问题"><a href="#_2-8-1-「css3-新增伪元素选择器基本使用」问题" class="header-anchor">#</a> 2.8.1 「CSS3 新增伪元素选择器基本使用」问题</h4> <ul><li>问题 1：<code>::before</code> 和 <code>::after</code> 会在什么位置创建元素？</li> <li>问题 2：<code>::before</code> 和 <code>::after</code> 必须要指定什么属性？</li> <li>问题 3：伪元素选择器的权重是多少？</li></ul> <h4 id="_2-8-2-「css3-新增伪元素选择器基本使用」答案"><a href="#_2-8-2-「css3-新增伪元素选择器基本使用」答案" class="header-anchor">#</a> 2.8.2 「CSS3 新增伪元素选择器基本使用」答案</h4> <ul><li><p>问题 1：<code>::before</code> 和 <code>::after</code> 会在什么位置创建元素？</p> <ul><li><code>::before</code> 在父元素内容的前面插入元素；</li> <li><code>::after</code> 在父元素内容的后面插入元素。</li></ul></li> <li><p>问题 2：<code>::before</code> 和 <code>::after</code> 必须要指定什么属性？</p> <ul><li><code>content</code> 属性</li></ul></li> <li><p>问题 3：伪元素选择器的权重是多少？</p> <ul><li><p>伪元素选择器的权重是 <code>1</code></p> <table><thead><tr><th>选择器</th> <th>权重</th></tr></thead> <tbody><tr><td>继承或 <code>*</code></td> <td><code>0,0,0,0</code></td></tr> <tr><td>标签选择器 / 伪元素</td> <td><code>0,0,0,1</code></td></tr> <tr><td>类选择器 / 属性选择器 / 伪类选择器</td> <td><code>0,0,1,0</code></td></tr> <tr><td>id 选择器</td> <td><code>0,1,0,0</code></td></tr> <tr><td>行内样式</td> <td><code>1,0,0,0</code></td></tr> <tr><td><code>!important</code></td> <td><code>∞</code></td></tr></tbody></table></li></ul></li></ul> <h4 id="_2-8-3-「css3-新增伪元素选择器基本使用」课堂练习"><a href="#_2-8-3-「css3-新增伪元素选择器基本使用」课堂练习" class="header-anchor">#</a> 2.8.3 「CSS3 新增伪元素选择器基本使用」课堂练习</h4> <ol><li>练习时长：5 分钟</li> <li>练习目的：体会<strong>使用伪元素在 div 中创建元素</strong>，并使用 Chrome 调试设置伪元素的样式。</li></ol> <h3 id="_2-9-伪元素选择器使用场景-1-配合字体图标"><a href="#_2-9-伪元素选择器使用场景-1-配合字体图标" class="header-anchor">#</a> 2.9 伪元素选择器使用场景 1-配合字体图标</h3> <blockquote><p>第 4 节课 / 8'36''</p></blockquote> <ol><li><p>猛击 <a href="/downloads/icomoon.zip">字体图标文件</a> 下载课程要使用的字体图标文件压缩包；</p></li> <li><p>在 CSS 样式中全局声明字体</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token atrule"><span class="token rule">@font-face</span></span> <span class="token punctuation">{</span>
  <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">'icomoon'</span><span class="token punctuation">;</span>
  <span class="token property">src</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'fonts/icomoon.eot?p4ssmb'</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span>
  <span class="token property">src</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'fonts/icomoon.eot?p4ssmb#iefix'</span><span class="token punctuation">)</span></span> <span class="token function">format</span><span class="token punctuation">(</span><span class="token string">'embedded-opentype'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'fonts/icomoon.ttf?p4ssmb'</span><span class="token punctuation">)</span></span>
      <span class="token function">format</span><span class="token punctuation">(</span><span class="token string">'truetype'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'fonts/icomoon.woff?p4ssmb'</span><span class="token punctuation">)</span></span> <span class="token function">format</span><span class="token punctuation">(</span><span class="token string">'woff'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'fonts/icomoon.svg?p4ssmb#icomoon'</span><span class="token punctuation">)</span></span>
      <span class="token function">format</span><span class="token punctuation">(</span><span class="token string">'svg'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">font-weight</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span>
  <span class="token property">font-style</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span>
  <span class="token property">font-display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>按照 pink 老师的魔鬼步伐完成课堂案例。</p></li> <li><p>参考代码如下：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">div</span> <span class="token punctuation">{</span>
  <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 35px<span class="token punctuation">;</span>
  <span class="token property">border</span><span class="token punctuation">:</span> 1px solid red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">div::after</span> <span class="token punctuation">{</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property">top</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
  <span class="token property">right</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
  <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">'icomoon'</span><span class="token punctuation">;</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">'\e91e'</span><span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 18px<span class="token punctuation">;</span>
</code></pre></div></li></ol> <h3 id="_2-10-伪元素选择器使用场景-2-仿土豆效果"><a href="#_2-10-伪元素选择器使用场景-2-仿土豆效果" class="header-anchor">#</a> 2.10 伪元素选择器使用场景 2-仿土豆效果</h3> <blockquote><p>第 4 节课 / 4'45''</p></blockquote> <p>案例实现步骤：</p> <ol><li>找到之前写过的仿土豆的结构和样式，拷贝到新的 HTML 中；</li> <li>删除之前的 mask 遮罩；</li> <li>给大盒子（<code>.tudou</code>），设置 <code>::before</code> 伪元素；</li> <li>设置 content 属性，属性的值为空字符串；</li> <li>利用 <code>.tudou:hover::before</code> 设置遮罩层的显示。</li></ol> <h3 id="_2-11-伪元素选择器使用场景-3-伪元素清除浮动本质"><a href="#_2-11-伪元素选择器使用场景-3-伪元素清除浮动本质" class="header-anchor">#</a> 2.11 伪元素选择器使用场景 3-伪元素清除浮动本质</h3> <blockquote><p>第 4 节课 / 6'27''</p></blockquote> <h4 id="_2-11-1-四种清除浮动的方式"><a href="#_2-11-1-四种清除浮动的方式" class="header-anchor">#</a> 2.11.1 四种清除浮动的方式</h4> <ol><li>额外标签法也称为隔墙法，是 W3C 推荐的做法；</li> <li>父级添加 overflow 属性；</li> <li>父级添加 after 伪元素；</li> <li>父级添加双伪元素。</li></ol> <blockquote><p>清除浮动：在末尾添加一个块级元素，并增加 <code>clear: both;</code> 属性。</p></blockquote> <h4 id="_2-11-2-两种伪元素清除浮动的原理"><a href="#_2-11-2-两种伪元素清除浮动的原理" class="header-anchor">#</a> 2.11.2 两种伪元素清除浮动的原理</h4> <blockquote><p>两种伪元素清除浮动算是第一种额外标签法的一个<strong>升级</strong>和<strong>优化</strong>。</p></blockquote> <ul><li><p>单伪元素</p> <p><img src="/basenode/assets/img/clearfix-single-pseudo.f5ba8696.png" alt="单伪元素"></p></li> <li><p>双伪元素清除浮动</p> <p><img src="/basenode/assets/img/clearfix-double-pseudo.18b5bca7.png" alt="双伪元素"></p></li></ul> <h2 id="☆3-css3-盒子模型"><a href="#☆3-css3-盒子模型" class="header-anchor">#</a> ☆3. CSS3 盒子模型</h2> <h3 id="_3-1-css3-盒子模型-border-box"><a href="#_3-1-css3-盒子模型-border-box" class="header-anchor">#</a> 3.1 CSS3 盒子模型 border-box</h3> <blockquote><p>第 5 节课 / 5'48''</p></blockquote> <h4 id="_3-1-1-「css3-盒子模型-border-box」问题"><a href="#_3-1-1-「css3-盒子模型-border-box」问题" class="header-anchor">#</a> 3.1.1 「CSS3 盒子模型 border-box」问题</h4> <ul><li>问题 1：CSS3 中可以哪一个属性来指定盒子模型？</li> <li>问题 2：<code>box-sizing</code> 属性有几个值，设置了哪一个值之后，设置 <code>padding</code>、<code>border</code> 不会影响盒子的大小？</li></ul> <h4 id="_3-1-2-「css3-盒子模型-border-box」答案"><a href="#_3-1-2-「css3-盒子模型-border-box」答案" class="header-anchor">#</a> 3.1.2 「CSS3 盒子模型 border-box」答案</h4> <ul><li><p>问题 1：CSS3 中可以哪一个属性来指定盒子模型？</p> <ul><li><code>box-sizing</code></li></ul></li> <li><p>问题 2：<code>box-sizing</code> 属性有几个值，设置了哪一个值之后，设置 <code>padding</code>、<code>border</code> 不会影响盒子的大小？</p> <ul><li><code>content-box</code>：盒子大小为 <code>width + padding + border</code>（以前默认的）；</li> <li><code>border-box</code>：盒子大小为 <code>width</code>，设置 <code>padding</code>、<code>border</code> 不会影响盒子的大小。</li></ul></li></ul> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p><code>padding</code> 和 <code>border</code> 不要超过 <code>width</code> / <code>height</code>。</p> <p>使用 CSS3 盒子模型可以避免布局中<strong>导航跳</strong>的情况。</p> <ul><li>导航盒子和下方盒子挨在一起，鼠标经过 <code>:hover</code> 设置盒子的下边框。</li></ul></div> <h2 id="☆4-css3-其他特性"><a href="#☆4-css3-其他特性" class="header-anchor">#</a> ☆4. CSS3 其他特性</h2> <h3 id="☆4-1-css3-图片模糊处理"><a href="#☆4-1-css3-图片模糊处理" class="header-anchor">#</a> ☆4.1 CSS3 图片模糊处理</h3> <blockquote><p>第 5 节课 / 4'09''</p></blockquote> <h4 id="_4-1-1-「css3-图片模糊处理」问题"><a href="#_4-1-1-「css3-图片模糊处理」问题" class="header-anchor">#</a> 4.1.1 「CSS3 图片模糊处理」问题</h4> <ul><li>问题 1：CSS3 中给图片增加滤镜是哪一个属性？</li> <li>问题 2：这个属性的哪一个函数可以对图片做模糊处理？语法格式是什么？</li></ul> <h4 id="_4-1-2-「css3-图片模糊处理」答案"><a href="#_4-1-2-「css3-图片模糊处理」答案" class="header-anchor">#</a> 4.1.2 「CSS3 图片模糊处理」答案</h4> <ul><li><p>问题 1：CSS3 中给图片增加滤镜是哪一个属性？</p> <ul><li><code>filter</code> 属性</li></ul></li> <li><p>问题 2：这个属性的哪一个函数可以对图片做模糊处理？语法格式是什么？</p> <ul><li><code>blur</code> 函数</li> <li>语法：<code>filter: blur(5px);</code> <ul><li>数值越大越模糊</li> <li>数值为 <code>0</code> 最清晰（不做模糊处理）</li></ul></li></ul></li></ul> <h4 id="_4-1-2-「css3-图片模糊处理」课堂练习"><a href="#_4-1-2-「css3-图片模糊处理」课堂练习" class="header-anchor">#</a> 4.1.2 「CSS3 图片模糊处理」课堂练习</h4> <ol><li>练习时长：2 分钟</li> <li>练习目的：使用<strong>filter: blur() 函数</strong>对图像做模糊处理</li> <li>图片素材自选</li></ol> <h3 id="_4-2-计算盒子宽度-calc-函数"><a href="#_4-2-计算盒子宽度-calc-函数" class="header-anchor">#</a> 4.2 计算盒子宽度 calc 函数</h3> <blockquote><p>第 5 节课 / 5'20''</p></blockquote> <h4 id="_4-2-1-「计算盒子宽度-calc-函数」问题"><a href="#_4-2-1-「计算盒子宽度-calc-函数」问题" class="header-anchor">#</a> 4.2.1 「计算盒子宽度 calc 函数」问题</h4> <ul><li>问题 1：CSS3 可以使用哪一个函数计算盒子的宽度？应用场景是什么？</li></ul> <h4 id="_4-2-2-「计算盒子宽度-calc-函数」答案"><a href="#_4-2-2-「计算盒子宽度-calc-函数」答案" class="header-anchor">#</a> 4.2.2 「计算盒子宽度 calc 函数」答案</h4> <ul><li><p>问题 1：CSS3 可以使用哪一个函数计算盒子的宽度？应用场景是什么？</p> <ul><li><code>calc</code> 函数；</li> <li><code>width: calc(100% - 80px);</code> 可以让子盒子永远比父盒子的宽度小 <code>80px</code>；</li> <li>类似京东商城的<strong>商品列表下方的水平滚动条的宽度</strong>，可以用这种方法处理。</li></ul></li></ul> <h3 id="☆4-3-css3-新增属性过渡-上-下"><a href="#☆4-3-css3-新增属性过渡-上-下" class="header-anchor">#</a> ☆4.3 CSS3 新增属性过渡（上 / 下）</h3> <blockquote><p>第 5 节课 / 7'00'' + 3'56''</p></blockquote> <h4 id="_4-3-1-「css3-新增属性过渡」问题"><a href="#_4-3-1-「css3-新增属性过渡」问题" class="header-anchor">#</a> 4.3.1 「CSS3 新增属性过渡」问题</h4> <ul><li>问题 1：CSS3 中可以通过哪一个属性实现过渡动画效果？</li> <li>问题 2：过渡动画的应用场景是什么？经常和什么一起搭配使用？</li> <li>问题 3：过渡动画的语法是什么？初期最应该记住哪一个？</li> <li>问题 4：使用过渡动画的口诀是什么？</li></ul> <h4 id="_4-3-2-「css3-新增属性过渡」答案"><a href="#_4-3-2-「css3-新增属性过渡」答案" class="header-anchor">#</a> 4.3.2 「CSS3 新增属性过渡」答案</h4> <ul><li><p>问题 1：CSS3 中可以通过哪一个属性实现过渡动画效果？</p> <ul><li><code>transition</code></li></ul></li> <li><p>问题 2：过渡动画的应用场景是什么？经常和什么一起搭配使用？</p> <ul><li>是从<strong>一个状态</strong>渐渐的过渡到<strong>另外一个状态</strong>，从一个<strong>属性值</strong>，过渡到另外一个<strong>属性值</strong>；</li> <li>经常和 <code>:hover</code> 一起搭配使用，让页面更好看，且动感十足。</li></ul></li> <li><p>问题 3：过渡动画的语法是什么？初期最应该记住哪一个？</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">transition</span><span class="token punctuation">:</span> 要过渡的属性 动画时间 运动曲线 何时开始<span class="token punctuation">;</span>
</code></pre></div><ul><li><strong>要过渡的属性</strong>：想要变化的 css 属性，可以是：宽度、高度、背景颜色、内外边距等
<ul><li><code>all</code> 可以让所有能动画的属性一起过渡变化</li></ul></li> <li><strong>动画时间</strong>：单位是<strong>秒</strong>（必须写单位），例如：<code>0.5s</code></li> <li><strong>运动曲线</strong>：默认是 <code>ease</code>（可以省略）</li> <li><strong>何时开始</strong>：单位是<strong>秒</strong>（必须写单位），动画延迟触发时间，默认是 0s（可以省略）</li></ul> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p><code>transition: all 0.5s</code> 所有属性在 <code>0.5s</code> 内完成过渡动画。</p></div></li> <li><p>问题 4：使用过渡动画的口诀是什么？</p> <ul><li><strong>谁做过渡给谁加</strong>。</li></ul></li></ul> <h4 id="_4-3-2-「css3-新增属性过渡」答案课堂练习"><a href="#_4-3-2-「css3-新增属性过渡」答案课堂练习" class="header-anchor">#</a> 4.3.2 「CSS3 新增属性过渡」答案课堂练习</h4> <ol><li>练习时长：5 分钟</li> <li>练习目的：模仿老师课堂案例实现过渡动画效果</li></ol> <h3 id="_4-4-css3-过渡练习"><a href="#_4-4-css3-过渡练习" class="header-anchor">#</a> 4.4 CSS3 过渡练习</h3> <blockquote><p>第 5 节课 / 5'13''</p></blockquote> <p>实现步骤：</p> <ol><li>创建两个 div 的盒子：<code>.bar&gt;.bar_in</code>；</li> <li>给 <code>.bar</code> 设置边框，宽高，圆角边框；</li> <li>给 <code>.bar_in</code> 设置初试的宽度、背景颜色、过渡效果；</li> <li>给 <code>.bar</code> 添加 <code>hover</code> 事件，让 <code>.bar_in</code> 宽度实现过渡动画。</li></ol> <h3 id="_4-5-css3-课堂作业-小米-logo"><a href="#_4-5-css3-课堂作业-小米-logo" class="header-anchor">#</a> 4.5 CSS3 课堂作业 —— 小米 Logo</h3> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <ul><li><img src="" alt="xiaomi_logo"></li> <li><img src="" alt="xiaomi_home"></li></ul></div> <ol><li><p>结构</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>header-logo<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>logo<span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>小米官网<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>小米官网<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p>思路分析</p> <ol><li>要实现图片应该怎么做？
<ul><li>背景图片</li> <li>伪元素（两个） <code>::before / ::after</code></li></ul></li> <li>CSS 的实现步骤
<ul><li><code>.header-logo</code></li> <li><code>.logo</code></li> <li>伪元素（图片 - 绝对定位）</li> <li>动画</li></ul></li></ol></li> <li><p>代码实现，从上到下</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.header-logo</span> <span class="token punctuation">{</span>
  <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.header-logo .logo</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 55px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 55px<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> orange<span class="token punctuation">;</span>

  <span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
  <span class="token property">text-indent</span><span class="token punctuation">:</span> -9999em<span class="token punctuation">;</span>
  <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.header-logo .logo::before,
.header-logo .logo::after</span> <span class="token punctuation">{</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>

  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">;</span>
  <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>

  <span class="token property">width</span><span class="token punctuation">:</span> 55px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 55px<span class="token punctuation">;</span>

  <span class="token comment">/* 谁做过渡给谁加 */</span>
  <span class="token property">transition</span><span class="token punctuation">:</span> all 0.5s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.header-logo .logo::before</span> <span class="token punctuation">{</span>
  <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>./images/mi-home.png<span class="token punctuation">)</span></span> no-repeat center<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.header-logo .logo::after</span> <span class="token punctuation">{</span>
  <span class="token property">left</span><span class="token punctuation">:</span> 55px<span class="token punctuation">;</span>
  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>./images/mi-logo.png<span class="token punctuation">)</span></span> no-repeat center<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.header-logo .logo:hover::before</span> <span class="token punctuation">{</span>
  <span class="token property">left</span><span class="token punctuation">:</span> -55px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.header-logo .logo:hover::after</span> <span class="token punctuation">{</span>
  <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li></ol> <h3 id="_4-6-广义的-h5-了解"><a href="#_4-6-广义的-h5-了解" class="header-anchor">#</a> 4.6 广义的 H5(了解）</h3> <blockquote><p>第 5 节课 / 2'24''</p></blockquote> <ul><li>广义的 HTML5 是 HTML5 本身 + CSS3 + JavaScript。</li> <li>这个集合有时称为 HTML5 和朋友，通常缩写为 HTML5。</li> <li>虽然 HTML5 的一些特性仍然不被某些浏览器支持，但是它是一种发展趋势。</li></ul> <p>MDN 参考链接：<a href="https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/basenode/css/day07.html" class="prev">
        CSS 第 07 天 —— 高级技巧
      </a></span> <!----></p></div> </main></div><div class="global-ui"><!----></div></div>
    <script src="/basenode/assets/js/app.52c57e5d.js" defer></script><script src="/basenode/assets/js/2.fd1002bd.js" defer></script><script src="/basenode/assets/js/6.ae7868e8.js" defer></script>
  </body>
</html>
